import React, { Component } from 'react'

let dingdan = ''
let caipinArr = []

export default class Model extends Component {
  state = {
    desk_num: '',
    dingdan_num: '',
    total_price: '',
    create_time: '',
    caipin_ids: [],
    status: 0,
    pay_time: ''
  }
  componentDidMount() {
    let obj = { ...this.props.changeObj }
    obj.status = 0
    obj.caipin_ids && (obj.caipin_ids = obj.caipin_ids.split(',') || [])

    this.setState(obj)

    this.getDingdanNum()
  }

  handleChange = (item, event) => {
    if (item === 'caipin_ids'){
      if (!this.state.caipin_ids.includes(event.target.value)){
        caipinArr.push(event.target.value)
        this.setState({ [item]: caipinArr })
      } else {
        let arr = [...this.state.caipin_ids]
        arr.splice(arr.indexOf(event.target.value),1)
        this.setState({ [item]: arr})
      }
      return
    }
    this.setState({ [item]: event.target.value })
  }

  getDingdanNum = () => {
    
    let date = new Date()
    let year = date.getFullYear() + ''
    let month = date.getMonth() * 1 + 1
    let dateNow = date.getDate()
    let num  
    month = month < 10 ? "0" + month + '' : month + ''
    dateNow = dateNow < 10 ? "0" + dateNow + '' : dateNow + ''
    num =  year + month + dateNow + "0000"

      if (this.props.dingdanObj.dingdan_num !== null ){
        let dingdanNum = this.props.dingdanObj.dingdan_num 
        if (num * 1 - dingdanNum * 1 < 9999){
          num = dingdanNum*1+1
        }
      }
    this.setState({ 
      dingdan_num: num,
      // create_time: new Date().toLocaleString(),
      create_time: new Date().toLocaleDateString() + '/' + new Date().getHours() + '/' + new Date().getMinutes() + '/' + new Date().getSeconds(),
      pay_time: '0'
     })
        
  }

  render() {
    return (
      <div>
        <div className="modal fade in" id="modal-default" style={{ display: "block", paddingRight: 17 }}>
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <button onClick={this.props.hideForm} type="button" className="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span></button>
                <h4 className="modal-title">添加信息</h4>
              </div>
              <div className="modal-body">
                <form className="form-horizontal">
                  <div className="box-body">

                    <div className="form-group">
                      <label htmlFor="inputEmail3" className="col-sm-2 control-label">订单号</label>
                      <div className="col-sm-10">
                        {this.state.dingdan_num}
                      </div>
                    </div>

                    <div className="form-group">
                      <label htmlFor="inputPassword3" className="col-sm-2 control-label">桌号</label>
                      <div className="col-sm-10">
                        <input onChange={this.handleChange.bind(null, "desk_num")}
                          value={this.state.desk_num}
                          type="text" className="form-control" id="inputEmail3" placeholder="请输入菜系桌号"
                        />
                      </div>
                    </div>

                    <div className="form-group">
                      <label htmlFor="total_price" className="col-sm-2 control-label">总金额</label>
                      <div className="col-sm-10">
                        <input onChange={this.handleChange.bind(null, "total_price")}
                          value={this.state.total_price}
                          type="text" className="form-control" id="total_price" placeholder="请输入总金额"
                        />
                      </div>
                    </div>

                    <div className="form-group">
                      <label htmlFor="create_time" className="col-sm-2 control-label">下单时间</label>
                      <div className="col-sm-10">
                        <input onChange={this.handleChange} readOnly="readonly"
                          value={this.state.create_time}
                          type="text" className="form-control" id="create_time" placeholder="请输入添加时间"
                        />
                      </div>
                    </div>

                    <div className="form-group">
                      <label htmlFor="caipin_ids" className="col-sm-2 control-label">订单详情</label>
                      <div className="col-sm-10">
                        <select multiple={true} value={this.state.caipin_ids} className="form-control" onChange={this.handleChange.bind(null, "caipin_ids")}>
                          {
                            this.props.caipins.map((cla, index) => {
                              return <option key={"option_" + index} value={cla.id} > {cla.foodname}</option>
                            })
                          }
                        </select>
                        {/* <input onChange={this.handleChange.bind(null, "caipin_ids")}
                          value={this.state.caipin_ids}
                          type="text" className="form-control" id="caipin_ids" placeholder="请输入添加时间"
                        /> */}
                      </div>
                    </div>

                    <div className="form-group">
                      <label htmlFor="status" className="col-sm-2 control-label">订单状态</label>
                      <div className="col-sm-10">
                        <input onChange={this.handleChange} readOnly="readonly"
                          value={this.state.status}
                          type="text" className="form-control" id="status" placeholder="请输入添加时间"
                        />
                      </div>
                    </div>

                    <div className="form-group">
                      <label htmlFor="pay_time" className="col-sm-2 control-label">结账时间</label>
                      <div className="col-sm-10">
                        <input onChange={this.handleChange} readOnly="readonly"
                          value={this.state.pay_time}
                          type="text" className="form-control" id="pay_time" placeholder="请输入添加时间"
                        />
                      </div>
                    </div>

                  </div>
                </form>
              </div>
              <div className="modal-footer">
                <button onClick={this.props.hideForm} type="button" className="btn btn-default pull-left">关闭</button>
                <button onClick={this.props.saveData.bind(null, this.state)} type="button" className="btn btn-primary">保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
